<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.tab" :name="item.name" v-for="item in tabs" :key='item.id'>

      </el-tab-pane>
    </el-tabs>
    <div class="filter-container filter-container-left">
      <el-form class="flex_box_between" :inline="true" label-width='90px'>
        <el-form-item label="用户名：">
          <el-input v-model="queryParam.username" placeholder="请输入用户名" clearable/>
        </el-form-item>
        <el-form-item label="账号：">
          <el-input v-model="queryParam.mobile" placeholder="请输入账号" clearable/>
        </el-form-item>
        <el-form-item label="注册时间：">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="filter-item form-search-input1"
            @change='timeChange'
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="登录时间：">
          <el-date-picker
            v-model="time1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="filter-item form-search-input1"
            @change='timeChange1'
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-width='90px'>
        <el-form-item label="处理人：" v-if="entry==2">
          <el-select v-model="queryParam.task_id" @change='taskIdChange' placeholder="请选择处理人" class="filter-item form-search-input-small">
            <el-option
              v-for="item in users"
              :key="item.uid"
              :label="item.user_info.username"
              :value="item.uid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item search" type='primary' icon="iconfont icon-sousuo" @click="handleSearch">查询</el-button>
          <el-button class="filter-item search" type="info" plain icon="iconfont icon-zhongzhi" @click="handleRefresh">重置</el-button>
          <el-button class="filter-item search" icon="iconfont icon-daochu" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="用户名" align='center'>
        <template slot-scope="item">
          <p>{{getUserName(item.row)}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="账号"  align='center'/>
      <el-table-column label="来源" align='center'>
        <template slot-scope="item">
          <p>{{getSourceText(item.row.source)}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="注册日期"  align='center'/>
      <el-table-column prop="last_login_date" label="登录日期"  align='center'/>
      <el-table-column label="备注内容" align='center'>
        <template slot-scope="item">
          <p>{{item.row.task_remarks}}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width='120' align='center'>
        <template slot-scope="item">
          <el-link type="primary" class="table_btn" @click="handleNote(item.row)" :underline="false"><i class="el-icon el-icon-plus"></i>备注</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :hide-on-single-page='isHideSingle'
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"/>
    <el-dialog :visible.sync="dialogFormVisible" width='500px' :show-close='false'>
      <div slot="title" class="dialog-title">添加备注</div>
      <el-form :model="form" label-width='80px' :label-position="labelPosition">
        <el-form-item label="用户">
          {{form.username}}/{{form.mobile}}
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.task_remarks" autocomplete="off" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size='medium'>取 消</el-button>
        <el-button type="primary" @click="addNote" size='medium'>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { export2Excel } from '@/utils/excel'
import formOperate from '@/layout/mixin/formOperate'
export default {
  props:{
    entry:{
      type:Number,
      default:1 // 1 我的任务 2 任务派发
    }
  },
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/task/admin/user',
      activeName: 'second',// tabs默认第几个展开
      tabs:[
        {id:-1,tab:'全部',name:'first'},
        {id:0,tab:'待跟进',name:'second'},
        {id:1,tab:'已完成',name:'third'}
      ],
      queryParam:{
        username:'',
        mobile:'',
        register_start_time:'',
        register_end_time:'',
        login_start_time:'',
        login_end_time:'',
        task_status:0,
        page:1,
        page_size:10,
        request_type:1,
        is_task:1,
        task_id:'',
        is_task_user:''
      },// 查询参数
      defaultQueryParam:['page','page_size','task_status','request_type','is_task_user'],
      time:'',
      time1:'',
      dialogFormVisible:false,
      form: {
        task_remarks:'',
        username:'',
        mobile:'',
        id:''
      },
      users:[] // 任务处理人
    }
  },
  mounted() {
    if(this.entry == 2) {
      this.getTaskUserList(1)
      this.queryParam.is_task_user = ''
    } else {
      this.queryParam.is_task_user = '1'
    }
  },
  methods: {
    // 获取任务处理人
    getTaskUserList(type) {
      let params = {
        type:type
      }
      this.$http.get('/task/admin/getTaskUserList',{params:params}).then(response => {
        if (response.code == 10000) {
          this.users = response.data
        }
      })
    },
    // tab切换
    handleClick(tab, event) {
      this.queryParam.task_status = this.tabs[tab.index].id
      this.queryParam.page = 1
      this.paginate.current = 1
      this.resetFormFields()
      this.getList()
    },
    // 处理人改变时
    taskIdChange(){
      this.queryParam.is_task_user = 1
    }, 
    // 监听注册时间选择
    timeChange(t) {
      this.queryParam.register_start_time = t[0]
      this.queryParam.register_end_time = t[1]
    },
    // 监听登录时间选择
    timeChange1(t) {
      this.queryParam.login_start_time = t[0]
      this.queryParam.login_end_time = t[1]
    },
    // 获取用户名
    getUserName(item){
      if (item.source==5) {
        return item.nick_name
      } else {
        if (item.chang_type==1) {
          return item.resume_count>0?item.profession_user.full_name:item.nick_name?item.nick_name:item.mobile
        } else if(item.chang_type==2){
          return item.profession_company?item.profession_company.name:item.username
        } else {
          item.username || item.mobile
        }
      }
    },
    // 添加备注打开弹框
    handleNote(item) {
      this.dialogFormVisible = true
      this.form.username = this.getUserName(item)
      this.form.mobile = item.mobile
      this.form.id = item.id
      this.form.task_remarks = item.task_remarks
    },
    // 添加备注
    addNote() {
      if (this.form.task_remarks) {
        this.$http.put(this.url+'/'+this.form.id,this.form).then(response => {
          if (response.code === 10000) {
            this.$message.success(response.message)
            this.dialogFormVisible = false
            for (let key in this.form) {
              this.form[key] = ''
            }
            this.getList()
          } else {
            this.$message.error(response.message)
          }
        })
      }
    },
    // 导出
    handleExport() {
      let columns = [
        {title:'用户名',key:'name'},
        {title:'账号',key:'mobile'},
        {title:'用户类型',key:'type'},
        {title:'来源',key:'source'},
        {title:'是否有简历',key:'is_resume'},
        {title:'是否有职位',key:'is_post'},
        {title:'注册时间',key:'create_time'},
        {title:'登录时间',key:'login_time'}
      ]
      let list = []
      this.data.forEach(res=>{
        list.push({
          name:this.getUserName(res),
          mobile:res.mobile,
          type:res.chang_type==1?'个人':res.chang_type==2?'企业':'',
          source:this.getSourceText(res.source),
          is_resume:res.resume_count>0?'有':'--',
          is_post:res.post_count>0?'有':'--',
          create_time:res.created_at,
          login_time:res.last_login_date
        })
      })
      export2Excel(columns,list,'用户数据')
    },
  }
}
</script>
